<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="">
    <title>余额提现</title>
    <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet"
          href="https://static.9hive.cn/global/vendor/bootstrap-table-1.11/bootstrap-table.min.css?v=1.1">

    <% include("../inc/input_css.html"){}%>
    <style type="text/css">
        .tixian {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px solid #eeeeee;
            padding-left: 40px;
            font-size: 18px;
        }

        .tixian > li {
            padding: 10px;
            position: relative;
            width: 100px;
            font-size: 14px;
            cursor: pointer;
        }

        .tixian > li.active:after {

            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100px;
            border-bottom: 1px solid #15abf3;
            content: '';
        }

        .tixian > li.active {
            color: #15abf3;
        }

        .hidden {
            display: none;
        }

        .light-input {
            width: 200px !important;
        }
    </style>

</head>

<body>
<div class="ibox">
    <div class="ibox-title">
        <div class="pull-left mbx navbar_title">
            <span class="current">账户管理</span>
            <span class="line">/</span>
            账户余额
        </div>
    </div>
    <div class="ibox-content">
        <div class="wrapper wrapper-content">
            <div>
                <ul style="" class="tixian">
                    <li class="active">马上提现</li>
                    <li>提现记录</li>

                </ul>
                <div id="getMoney" style="padding-left: 100px;">
                    <div style="display: flex;align-items: center;color: #909090;margin-top:20px;">
                        <label style="width: 100px ;text-align:right;margin-right:20px">提现至:</label>
                        <div class="width-200">
                            <select class="form-control light-input" id="selectType">
                                <option>银行卡</option>
                                <option>支付宝</option>
                                <option>微信</option>
                            </select>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;color: #909090;margin-top:20px;"><label
                            style="width: 100px ;text-align:right;margin-right:20px">可用余额:</label>
                        <div style="width: 325px;display: flex;align-items: center;justify-content: space-between;font-size: 18px">
                            <label class="light-input"><span id="yue">${agentBalance.balance!0.00}</span>元</label>
                            <button class="hive-btn hive-btn-primary" id="allselect">全部提现</button>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;color: #909090;margin-top:20px;"><label
                            style="width: 100px ;text-align:right;margin-right:20px">提现金额:</label>
                        <div style="width: 300px"><input class="formText light-input " placeholder="请输入提现金额"
                                                         id="needyue"/></div>
                    </div>
                    <div style="display: flex;align-items: center;color: #909090;margin-top:20px;"><label
                            style="width: 100px ;text-align:right;margin-right:20px">当前手机号:</label>
                        <div style="width: 300px" class="light-input">${member.phone!}</div>
                    </div>

                    <div style="display: flex;align-items: center;color: #909090;margin-top:20px;"><label
                            style="width: 100px ;text-align:right;margin-right:20px">短信验证码:</label>
                        <div style="width: 300px;display: flex;align-items: center;justify-content: space-between">
                            <input class="formText light-input" placeholder="验证码" id="message"
                                   style="width: 180px"/>
                            <button style="width: 80px" class="hive-btn hive-btn-primary" id="senCodes">获取</button>
                        </div>
                    </div>
                    <div style="text-align: left;margin-top: 40px;padding-left: 120px">

                        <button class="hive-btn hive-btn-primary" id="submit" type="button">提交</button>
                    </div>
                    <!--<div style="margin-top: 140px;border-top: 1px solid #eee;padding-top: 40px;color: #909090">-->
                        <!--<div>温馨提示</div>-->
                        <!--<div style="margin-top: 10px"> 1、开通存管账户、设置交易密码、绑定银行卡后，才能进行提现操作。-->
                        <!--</div>-->
                        <!--<div style="margin-top: 10px"> 2、提现免手续费 。-->
                        <!--</div>-->
                        <!--<div style="margin-top: 10px"> 3、提现将会在审核成功后的下一个工作日到账；遇双休日、国家法定节假日，到账日期顺延。-->
                        <!--</div>-->
                        <!---->
                        <!--&lt;!&ndash;<div style="margin-top: 10px"> 注：若有特殊情况，最终以银行解释为准。-->
                        <!--</div>&ndash;&gt;-->
                    <!--</div>-->

                    <div style="color: #a3afb7;margin-top: 40px;padding: 0 20px">用户须知：商家货款、一键推广及销售返点应当在客户确认收货后五个工作日才能到银行帐户</div>
                </div>
                <div id="getMoneyDetil" class="hidden" style="padding: 20px">
                    <div id="eventsToolbar" class="form-inline hive_input">

                    </div>
                    <table data-toggle="table " id="table"
                           class=" table-striped table-no-bordered fixed-table-container table-row-border-color table-hovered table-hover">
                        <thead class="table-header">
                        <tr>
                            <th data-field="addMoney">提现金额</th>
                            <th data-field="createDate">提现时间</th>
                            <th data-field="bankType" data-formatter="bankTypeFormatter">提现方式</th>
                            <th data-field="cashingStatus" data-formatter="cashingStatusFormatter">提现状态</th>
                            <th data-field="reason">备注</th>

                        </tr>
                        </thead>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<% include("../inc/input_js.html"){}%>
<script src="https://static.9hive.cn/global/vendor/bootstrap-table-1.11/bootstrap-table.min.js"></script>
<script src="https://static.9hive.cn/global/vendor/bootstrap-table-1.11/locale/bootstrap-table-zh-CN.min.js"></script>

<script>
    var list = $('.tixian >li');
    var index = 0;
    $('.tixian >li').on('click', function () {
        var $this = $(this);
        $.each(list, function () {
            $(this).removeClass('active');
        });
        index = list.index($this)
        $this.addClass('active');
        if (index == 0) {
            $('#getMoney').removeClass('hidden');
            $('#getMoneyDetil').addClass('hidden');
        } else {
            $('#getMoney').addClass('hidden');
            $('#getMoneyDetil').removeClass('hidden');
        }
    });
    $('#senCodes').on('click', function () {
        var $this = $(this);
        var phone = '${member.phone!}';
        if (!phone) {
            layer.msg('手机号不正确');
            return false
        }
        $.ajax({
            url: '/shop/agentCashingManage/validateCaptcha',
            data: {
                "phone": phone,
            },
            success: function (data) {

                if (data.state === 'fail') {
                    layer.msg(data.info);
                    return false;
                } else {
                    var timmer = 60;
                    $this.attr('disabled', true);
                    var phoneCodeTimer = setInterval(function () {
                        if (timmer >= 1) {
                            timmer--;
                            $this.text(timmer + " s");
                        } else {
                            $this.text('验证码');
                            window.clearInterval(phoneCodeTimer);
                            $this.removeAttr('disabled');
                        }

                    }, 1000);

                }
            }
        })

    })
    $('#allselect').on('click', function () {
        $('#needyue').val($('#yue').text())
    });
    $('#submit').on('click', function () {
        var amount = $('#needyue').val();
        var yanzhengma = $('#message').val();
        if (!yanzhengma) {
            layer.msg("请输入验证码");
            return false
        }
        if (10 > parseFloat(amount) || !amount) {
            layer.msg("提现金额必须大于10元");
            return false
        }


        var payType = $("#selectType").get(0).selectedIndex;
        console.log(payType)

        $.ajax({
            url: "/shop/agentCashingManage/cashingApply",
            data: {
                cashAmount: amount,
                bankType: payType,
                phonecode: yanzhengma

            }, success: function (data) {
                if (data.state == 'ok') {
                    layer.msg(data.msg);
                    window.location.reload();
                } else {
                    layer.msg(data.msg);
                }
            }
        })
    })
    $('#table').bootstrapTable({
        url: "/shop/agentCashingManage/ajaxlist",
        dataType: 'json',
        contentType: 'application/json',
        search: true,
        searchAlign: 'right',
        pagination: true,
        showRefresh: true,
        paginationLoop: true,
        showToggle: false,//是否显示card/table切换按钮
        showColumns: true,//是否显示内容列下拉框
        pageList: [10, 20, 50, 100],
        iconSize: 'outline',
        toolbar: '#eventsToolbar',
        paginationHAlign: 'right', //right, left
        paginationVAlign: 'bottom',
        formatNoMatches: function () { //判断有无数据
            var imghtml = '<div class="text-center"><img src="https://static.9hive.cn/global/img/nodata.png" class="no_data"/>暂无数据</div>';
            return imghtml;
        },
        formatLoadingMessage: function () {  //数据加载中样式
            return ' <div id="loading"><div id="loading-center">' +
                '<div id="loading-center-absolute"><div class="object" id="object_one">' +
                '</div><div class="object" id="object_two"></div><div class="object" id="object_three">' +
                '</div><div class="object" id="object_four"></div></div></div>努力加载中...</div>'
        },
        icons: {
            refresh: 'icon-refresh',
            toggle: 'glyphicon-list-alt',
            columns: 'icon-select',
            export: 'icon-export'
        }

    })


    function bankTypeFormatter(v) {
        if(v==0){
            return '银行卡';
        }else if(v==1){
            return '支付宝';
        }else if(v==2){
            return '微信';
        }
    }

    function cashingStatusFormatter(v) {
        if(v==0){
            return '提现成功';
        }else if(v==1){
            return '申请成功';
        }else if(v==2){
            return '提现失败';
        }
    }

</script>

</body>
</html>